<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container bg">
    <div class="container-content">
      <!-- 头部 -->
      <header class="h-150">
        <div class="title h-105 w-safe">
          <h1 class="pt-3">The Flower Blog</h1>
        </div>
        <!-- 导航 -->
        <div class="nav h-50 bg-2C">
          <ul class="w-safe h-full flex items-center">
            <li>Blog</li>
            <li>About</li>
            <li>Archives</li>
            <li>Contact</li>
            <li>
              <img  src="./img/wifi.png" alt="">
              Sybscnbe via RSS
            </li>
          </ul>
        </div>
      </header>
      <!-- logo -->
      <section class="logo w-safe pt-2">
        <img class="logo-w br-10" src="./img/logo.png" alt="">
        <div class="logo__content logo-content-w">
          <h1 class="font-fff w-full mb-12 font-25 line-50">Do you know flowers as much as we do?</h1>
          <p class="font-e0f1da font-13 line-20">Do you know flowers as much as we doDo you know flowers as much as we doDo you know flowers as much as we
            doDo you know flowers as much as we doDo you know flowers as much as we doDo you know flowers as much as we
            do</p>
        </div>
      </section>

      <!--内容 -->
      <section class=" content w-safe">
        <section class="flex">
          <div class="left flex-2">
            <section class="left__article pb-2">
              <h1 class="font-30 mt-6 mb-4">This is the title of a blog post</h1>
              <h3 class="font-14 font-BBC4C8 font-italic pb-3">Posted on June 29th 2009 by <span>Mads Kiaer</span> - <span>3 comments</span></h3>
              <section class="left__article__content flex">
                <div class="left__article__content__left flex-1">
                  <p>Lorem ipsum dolor sit amet consectetur adipiscing
                    elit. Proin euismod tellus eu orci imperdiet nec
                    rutrum lacus blandit Cras enim nibh sodales
                    ultricies elementum vel fermentum id tellus. Proin
                    metus odio. ulthcies eu pharetra dictum, laoreet id
                    odio. Curabitur in odio augue. Morbi conque auctor
                    interdum. Phasellus sit amet metus justo Phasellus
                    vitae tellus orci. at elementum ipsum. In in quam
                    eget diam adipiscing condimentum. Maecenas
                    gravida diam vitae nisi convallis vulputate quis sit
                    amet nibh Nullam ut velit tortor Curabitur ut elit id
                    nisi volutpat consectetur acac lorem. Quisque non
                    elit et elit lacinia lobortis nec a velit Sed ac nisi
                    sed enim consequat porttitor</p>
                  <div class="left__article__content__left__img ">
                    <img class="w-full" src="./img/flower.png" alt="">
                  </div>

                  <p>
                    Pellentesque ut sapien arcu. egestas mollis massa
                    usee lectus leo fringilla at liquet sit amet
                    volutpat non erat Aenean molestie nibh vitae turpis
                    venenatis vel accumsan nunc tincidunt
                  </p>
                </div>
                <div class="left__article__content__right flex-1">
                  <p>Suspendisse id purus vel felis auctor mattis non ac
                    erat. Pellentesque sodales venenatis condimentum
                    Aliquam sit amet nibh nisi, ut pulvinar est. Sed
                    ullamcorper nisi vel tortor volutpat eleifend
                    Vestibulum iaculis ullamcorper diam consectetur
                    sagittis. Quisque vitae maus ut elit semper
                    condimentum vahus nec nisi Nulla tempus porttitor
                    dolor ac eleifend Proin vitae purus lectus. a
                    hendreht ipsum. Aliquam mattis lacinia hsus in
                    blandit</p>

                  <p class="mt-7">Vivamus vitae nulla dolor Suspendisse eu lacinia
                    justo Vestibulum a felis ante, non aliquam leo
                    Aliquam eleifend est viverra semper luctus metus
                    purus commodo elit. a elementum nisi lectus vel
                    magna. Praesent faucibus leo sit amet arcu
                    vehicula sed facilisis eros liquet. Etiam sodales
                    enim sit amet mollis vestibulum. ipsum sapien
                    accumsan lectus. eget ultricies arcu velit ut diam
                    Aenean fermentum luctus nulla eu malesuada urna
                    consequat in Pellentesque habitant morbi thstique
                    senectus et netus et malesuada fames ac turpis
                    egestas Pellentesque massa lacus. sodales id
                    facilisis ac. lobortis sed arcu. Donee hendreht
                    fringilla ligula. ac rutrum nulla bibendum id. Cras
                    sapien ligula. tincidunt eget euismod nec ultricies
                    eu augue Nulla vitae velit sollicitudin magna mattis
                    eleifend. Nam enim justo vulputate vitae pretium
                    ac rutrum at turpis Aenean id magna neque. Sed
                    rhoncus liquet viverra</p>
                </div>
              </section>
            </section>
            <section class="left__comments pb-3">
              <h1 class="font-25 mt-4 mb-4">Comments</h1>
              <section class="line-25 mr-6 ml-4">
                <div class="left__comments__content flex mb-5">
                  <div class="left__comments_content__left flex-2">
                    <h3>George Washington</h3>
                    <span>on June 29th 2009 at 23.35</span>
                  </div>
                  <div class="left__comments_content__right flex-3">
                    <span>
                      Lorem ipsum dolor sit amet. consectetur adipisicing elit
                      on June 29th 2009 at 23: 35 sed do eiusmod tempor
                      magna aliqua Ut enim ad minim veniam. quis nostrud
                      exercitation ullamco laboris nisi ut
                    </span>
                  </div>
                </div>
                <div class="left__comments__content flex mb-5">
                  <div class="left__comments_content__left flex-2">
                    <h3>George Washington</h3>
                    <span>on June 29th 2009 at 23.35</span>
                  </div>
                  <div class="left__comments_content__right flex-3">
                    <span>
                      Lorem ipsum dolor sit amet. consectetur adipisicing elit
                      on June 29th 2009 at 23: 35 sed do eiusmod tempor
                      magna aliqua Ut enim ad minim veniam. quis nostrud
                      exercitation ullamco laboris nisi ut
                    </span>
                  </div>
                </div>
                <div class="left__comments__content flex mb-5">
                  <div class="left__comments_content__left flex-2">
                    <h3>George Washington</h3>
                    <span>on June 29th 2009 at 23.35</span>
                  </div>
                  <div class="left__comments_content__right flex-3">
                    <span>
                      Lorem ipsum dolor sit amet. consectetur adipisicing elit
                      on June 29th 2009 at 23: 35 sed do eiusmod tempor
                      magna aliqua Ut enim ad minim veniam. quis nostrud
                      exercitation ullamco laboris nisi ut
                    </span>
                  </div>
                </div>
              </section>
            </section>
            <section class="left__email">
              <h1 class="f-25">Post a comment</h1>
              <section class="left__email__content flex flex-col w-full items-end">
                <p><span>Name</span> <input type="text"></p>
                <p><span>E-mail</span> <input type="text"></p>
                <p><span>Website</span> <input type="text"></p>
                <p class="flex"><span class="font-16">Comment</span> <textarea name="" id="" cols="30" rows="10"></textarea></p>
              </section>
              <input class="left__email__btn font-16" type="button" value="Post comment">
            </section>
          </div>
          <div class="right flex-1 flex flex-col items-end">
            <div class="right__categories mt-7">
              <h1 class="font-20">Categories</h1>
              <p>Lorem ipsum dolor</p>
              <p>Sit amet consectetur</p>
              <p>Adipisicing elit sed</p>
              <p>Do esmod tempor</p>
              <p>ncididunt ut labore</p>
            </div>
            <div class="right__archives mt-7">
              <h1>Archives</h1>
              <p>December 2008</p>
              <p>January 2009</p>
              <p>February 2009</p>
              <p>March 2009</p>
              <p>April 2009</p>
              <p>May 2009</p>
              <p>June 2009</p>
            </div>
          </div>
        </section>
      </section>

      <!-- footer -->
      <footer class="flex-center">
        <section class="footer__content w-full flex justify-center">
          <div class="footer__content__about">
            <h1>About</h1>
            <p class="font-15">Lorem ipsum dolor sit amet. consectetur adipisicing
              elit sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua Ut enim ad minim veniam
              quis nostrud exercitation ullamco <span>laboris nisi ut
                aliquip</span> ex ea commodo consequat. Duis aute irure
              dolor in reprehenderit in voluptate velit esse cillur
              dolore eu fugiat nulla pariatur. Excepteur sint
              occaecat cupidatat non proident sunt in culpa qui
              officia deserunt mollet anim id est labrum</p>
          </div>
          <div class="footer__content__Blogroll">
            <h1>Blogroll</h1>
            <ul>
              <li>NETTUTS+</li>
              <li>NETTUTS+</li>
              <li>NETTUTS+</li>
              <li>NETTUTS+</li>
              <li>NETTUTS+</li>
            </ul>
  
          </div>
          <div class="footer__content__Popular">
            <h1>Popular</h1>
            <ul>
              <li>This is the title of a blog post</li>
              <li>This is the title of a blog post</li>
              <li>This is the title of a blog post</li>
              <li>This is the title of a blog post</li>
              <li>This is the title of a blog post</li>
              <li>This is the title of a blog post</li>
              <li>This is the title of a blog post</li>
            </ul>
          </div>
        </section>
      </footer>
    </div>
  </div>
</body>

</html>